import React, { useEffect, useState } from "react";
import { Form, InputNumber, message, notification, Select, Checkbox, Input, Button, Upload } from "antd";
import { logisticsCompanyList } from "@/utils/config";
import SelectPrint from "./SelectPrint";
// 快递操作
export default props => {
	const { ids, modelType, handleExport } = props;
	return (
		<>
			{modelType === "batchPrint" && (
				<>
					<Form.Item label="订单数量" name="orderCount">
						<div>{ids.length}</div>
					</Form.Item>
					<Form.Item label="快递公司1" name="printer" rules={[{ required: true, message: "请选择打印机" }]}>
						<SelectPrint />
					</Form.Item>
					<Form.Item label="快递公司2" name="printer" rules={[{ required: true, message: "请选择打印机" }]}>
						<SelectPrint />
					</Form.Item>
				</>
			)}
			{["updateDelivery", "batchUpdateDelivery"].includes(modelType) && (
				<>
					<Form.Item label="快递公司名称" name="logisticsCompany" rules={[{ required: true, message: "请选择快递公司" }]}>
						<Select placeholder="请选择快递公司">
							{logisticsCompanyList.map((item, index) => (
								<Option key={index} value={item}>
									{item}
								</Option>
							))}
						</Select>
					</Form.Item>
					{modelType === "updateDelivery" && (
						<>
							<Form.Item label="快递运单号" name="logisticsNo" rules={[{ required: true, message: "请输入快递运单号" }]}>
								<Input placeholder="请输入快递运单号" autoComplete="off" />
								<p className="common-color5" style={{ fontSize: "12px", padding: "12px 8px 0" }}>
									注：手动更改过的物流信息不支持打印快递面单
								</p>
							</Form.Item>
						</>
					)}
					{modelType === "batchUpdateDelivery" && (
						<>
							<Form.Item
								label="快递运单号"
								valuePropName="checked"
								name="logisticsNo"
								rules={[{ required: true, message: "请输入快递运单号" }]}
							>
								<Checkbox>自动获取运单号</Checkbox>
							</Form.Item>
						</>
					)}
				</>
			)}
			{modelType === "batchExport" && (
				<>
					<div className="flex" style={{ justifyContent: "space-around" }}>
						<Button shape="round" size="default" onClick={handleExport}>
							导出表格
						</Button>
						<Upload {...props}>
							<Button shape="round" size="default" icon={null}>
								导入表格
							</Button>
						</Upload>
					</div>
					<div style={{ marginTop: "30px" }}>
						<p className="common-color9">注：</p>
						<p className="common-color9">批量修改需先将需要修改的订单进行导出，在表格内修改完成后再次进行导入系统即可完成修改</p>
					</div>
				</>
			)}
		</>
	);
};
